<template>
  <div class="control ">
    <!--  标题区域  -->
    <div class="flex flex-a-c">
      <div class="control-title colorin">数据信息</div>
    </div>
    <div>
      <a-form-model :model="queryParam">
        <a-row :gutter="24">
          <a-col :span="6">
            <a-form-model-item label="物料条码" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input
                v-model="queryParam.materialbarcode"
                placeholder="物料条码"
                allowClear
              />
            </a-form-model-item>
          </a-col>
          <a-col :span="6">
            <a-form-model-item label="物料色标" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input
                v-model="queryParam.materialcolor"
                placeholder="物料色标"
                allowClear
              />
            </a-form-model-item>
          </a-col>
          <a-col :span="6">
            <a-form-model-item label="线别" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input
                v-model="queryParam.line"
                placeholder="线别"
                allowClear
              />
            </a-form-model-item>
          </a-col>
          <a-col :span="6">
            <a-form-model-item label="班次" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input
                v-model="queryParam.stackoutclass"
                placeholder="班次"
                allowClear
              />
            </a-form-model-item>
          </a-col>
          <a-col :span="6">
            <a-form-model-item label="栈板码" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input
                v-model="queryParam.palletcode"
                placeholder="栈板码"
                allowClear
              />
            </a-form-model-item>
          </a-col>
          <a-col :span="6">
            <a-form-model-item label="时间" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-date-picker @change="dateChange" />
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <span style="float: right; overflow: hidden;">
              <a-button class="btn-1" icon="search" style="margin-right: 8px;" type="primary" @click="onSearch">
                搜索
              </a-button>
              <a-button class="btn-2" @click="handleReset">
                <a-icon type="sync" />
                重置
              </a-button>
            </span>
          </a-col>
        </a-row>
      </a-form-model>
    </div>
    <div>
      <a-row :gutter="24">
        <div>
          <a-table
            :columns="columns"
            :data-source="tableData"
            :loading="loading"
            :pagination="false"
            :rowKey="(record, index) => record.id"
          ></a-table>
        </div>
        <div style="padding: 20px;text-align:right">
          <a-pagination
            show-quick-jumper
            v-model="page"
            :show-total="(total) => `共 ${total} 条记录`"
            :total="total"
            size="small"
            @change="changePage"
          />
        </div>
      </a-row>
    </div>
  </div>
</template>

<script>
import api from '@api/deviceInfo';
import { columns } from './FSBSconfig';
export default {
  name: 'ControlSystem',
  data() {
    return {
      columns,
      loading: false,
      queryParam: {},
      tableData: [],
      page: 1,
      pageSize: 10,
      total: 0,
      labelCol: {
        xs: { span: 24 },
        sm: { span: 6 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 18 },
      },
    };
  },
  computed: {
    macSN() {
      return this.$route.query.macsn;
    },
  },
  mounted() {
    this.getBSMaterialInfos();
  },
  methods: {
    onSearch() {
      this.getBSMaterialInfos(this.queryParam);
    },
    handleReset() {
      for (const key in this.queryParam) {
        if (Object.hasOwnProperty.call(this.queryParam, key)) {
          this.queryParam[key] = '';
        }
      }
      this.page = 1;
      this.getBSMaterialInfos();
    },

    // 查询数控系统信息
    async getBSMaterialInfos(params = {}) {
      debugger
      this.loading = true;
      let baseParams = { macsn: this.macSN, page: this.page, pagesize:this.pageSize };
      let _params = Object.assign(baseParams, params);
      const res = await api.getBSMaterialInfos(_params);
      this.loading = false;
      if (res && res.data) {
        this.tableData = res.data;
        this.total = res.totalPages;
      }
    },

    changePage(page) {
      this.page = page;
      this.getBSMaterialInfos();
    },

    dateChange(date, dateString) {
      this.queryParam.starttime = dateString;
      this.queryParam.endtime = dateString;
    }
  },
};
</script>

<style scoped lang="less">
.control {
  font-family: Microsoft YaHei;
  .control-title {
    font-size: 16px;
    font-weight: bold;
    color: #000000;
    margin-right: 20px;
  }
}
</style>
